<template>
  <div>
    <el-container class="container">
      <el-header height="180px" class="header">
        <SearchPanel
          :options="departments"
          @updateSearchCondition="handleUpdateSearchCondition"
          @clickSearch="handleSearch"
        />
        <OrderInfo />
      </el-header>

      <el-main class="main">
        <div class="datetime-wrapper">
          <span>日期（周）</span>
          <el-date-picker
            size="small"
            v-model="whichWeek"
            type="week"
            @change="handleChooseWeek"
            format="yyyy 第 WW 周"
            placeholder="选择周"
          >
          </el-date-picker>
        </div>
        <Schedule
          :loading="tableDataLoading"
          :schedules="schedules"
          :dates="dates"
          @addDuty="handleAddDuty"
          @clickOneDuty="handleEditDuty"
        />
        <el-pagination
          @current-change="handleChoosePage"
          class="pagination"
          :current-page.sync="page"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-main>
    </el-container>

    <AddDialog
      ref="add_dialog"
      @submit="handleSubmitAdd"
      :mainServiceTypeOptions="mainServiceTypeOptions"
      :subServiceTypeOptions="subServiceTypeOptions"
    />

    <EditDialog
      ref="edit_dialog"
      :duty="duty"
      @confirm="handleConfirmEditDuty"
      @delete="handleDeleteDuty"
    />
  </div>
</template>

<script>
import props from './props';
import data from './data';
import computed from './computed';
import lifecircle from './lifecircle';
import methods from './methods';

import SearchPanel from './components/SearchPanel/SearchPanel.vue';
import Schedule from './components/Schedule/Schedule.vue';
import OrderInfo from './components/OrderInfo/OrderInfo.vue';
import AddDialog from './components/AddDialog/AddDialog.vue';
import EditDialog from './components/EditDiglog/EditDiglog.vue';
export default {
  name: 'DutyContent',
  components: {
    Schedule,
    SearchPanel,
    OrderInfo,
    AddDialog,
    EditDialog
  },
  props,
  ...lifecircle,
  computed,
  data,
  methods
};
</script>
<style lang="less">
::-webkit-scrollbar {
  display: none;
}
</style>
<style lang="less" scoped>
.container {
  width: auto;
  float: right;
  .header {
    display: flex;
    > :last-child {
      margin-left: 50px;
    }
  }

  .main {
    .datetime-wrapper {
      margin-bottom: 20px;
      span {
        color: #333;
      }
    }
    .pagination {
      margin-top: 20px;
      float: right;
    }
  }
}
</style>
